<template>
  <div>
    <div class="classifybox">
      <!-- 第一个 -->
      <div class="today">
        <img class="img" src="../../assets/images/todayVisitsUser.png" alt="" />
        <div class="right">
          <p class="title">工单总数（条）</p>
          <div class="number">{{ formData.sum }}</div>
      </div>
      </div>
      <!-- 第二个 -->
      <div class="today">
        <img class="img" src="../../assets/images/todayVisitsNum.png" alt="" />
        <div class="right">
          <p class="title">今日工单数量</p>
          <div class="number">{{ formData.nowNumber }}</div>
          <i
            :class="[
              formData.flag
                ? 'el-icon-caret-top type-blue'
                : 'el-icon-caret-bottom type',
            ]"
          ></i>
          <span :class="[formData.flag ? 'type-blue' : 'type']"
          >{{ formData.percent }}
          </span>
          <span class="compare">同比昨日</span>
        </div>
      </div>
      <!-- 第三个 -->
      <div class="today">
        <img class="img" src="../../assets/images/visitsUser.png" alt="" />
        <div class="right">
          <p class="title">未分配（条）</p>
          <div class="number">{{ formData.untreatedNumber }}</div>
        </div>
      </div>
      <!-- 第四个 -->
      <div class="today">
        <img class="img" src="../../assets/images/visitsNum.png" alt="" />
        <div class="right">
          <p class="title">未完成（条）</p>
          <div class="number">{{ formData.unfinishNumber }}</div>
        </div>
      </div>
      <!-- 第五个盒子-->
      <div class="today">
        <img class="img" src="../../assets/images/todayVisitsUser.png" alt="" />
        <div class="right">
          <p class="title">处理完成（条）</p>
          <div class="number">{{ formData.finishNumber }}</div>
        </div>
      </div>
    </div>
    <div class="echarts">
      <el-row :gutter="10">
        <el-col :span="12">
          <el-card>
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;">工单数量排名</span>
            </div>
            <!-- 搜索 -->
            <div class="serachBox2">
              <el-form :model="form" ref="form" inline>
              <el-form-item size="medium">
               <el-radio-group
                    v-model="form.ftype"
                    fill="#409eff"
                    style=" margin-top: 10px; margin-right: 20px; margin-bottom: 10px;"
                    @change="getBarChart"
                  >
                    <el-radio-button label="A">本日</el-radio-button>
                    <el-radio-button label="B">本周</el-radio-button>
                    <el-radio-button label="C">本月</el-radio-button>
                    <el-radio-button label="D">本年</el-radio-button>
                </el-radio-group>
                <el-date-picker
                  v-model="form.dateRange"
                  :picker-options="pickerOptions"
                  type="daterange"
                  format="yyyy-MM-dd HH:mm:ss"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  size="medium"
                  style="width: 225px; margin-right: 20px; margin-bottom: 10px;"
                  @change="getBarChart('null')"
                >
                </el-date-picker>
                <el-select v-model="form.state" clearable placeholder="请选择订单状态" @change="getBarChart">
                  <el-option
                    v-for="item in stateList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              </el-form>
            </div>
            <!-- 图表 -->
            <div class="leftChart">
              <div id="barChart" style="width: 100%; height: 400px; overflow-y: auto;"></div>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div slot="header" class="clearfix">
              <span style="font-weight: bold;">工程师一览图</span>
            </div>
            <!-- 搜索 -->
            <div class="serachBox2">
              <el-form :model="formTwo" ref="formTwo" inline>
                <el-form-item>
                  <SelectSearchId
                    v-model="formTwo.engineerId"
                    :options="engineerList"
                    :clearable="false"
                    filterable
                    label="选择工程师"
                    @change="getLineChart"
                  ></SelectSearchId>
                </el-form-item>
                <el-form-item size="medium" style="margin-top: 6px;">
                  <el-radio-group
                    v-model="formTwo.ftype"
                    fill="#409eff"
                    @change="getLineChart"
                  >
                    <el-radio-button label="A">近一周</el-radio-button>
                    <el-radio-button label="B">近一月</el-radio-button>
                    <el-radio-button label="C">近一年</el-radio-button>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
            <!-- 图表 -->
            <div class="rightChart">
              <div id="lineChart" style="width: 100%; height: 400px; overflow-y: auto;"></div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>``

<script>
import SelectSearchId from '@/components/SearchBar/SelectSearchId'
import * as OrderAction from '@/api/order'
import {Message} from 'element-ui'

export default {
  name: "index",
  components: {
    SelectSearchId
  },
  data () {
    return {
      engineerList: [], // 工程师列表
      stateList: [
        {
          id: 3,
          name: '未确认'
        },
        {
          id: 1,
          name: '处理中'
        },
        {
          id: 2,
          name: '已完成'
        },
      ], // 订单状态列表
      form: {
        ftype: "A", // 类型，默认是本日
        dateRange: [], // 自定义时间
        state: null, // 订单状态
      },
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          if (minDate && this.pickerMinDate) {
            this.pickerMinDate = null;
          } else if (minDate) {
            this.pickerMinDate = minDate.getTime();
          }
        },
        disabledDate: (time) => {
          if (this.pickerMinDate) {
            return (
              time.getTime() > this.pickerMinDate + this.day30 ||
              time.getTime() < this.pickerMinDate - this.day30
            );
          }
          return false;
        },
      },
      formTwo: {
        ftype: "A",
        engineerId: null,
      },
      appNameOptions: [], // 平台集合
      formData: {
        nowNumber: 0, // 今日工单数量
        unfinishNumber: 0, // 未完成数量
        finishNumber: 0, // 完成数量
        sum: 0, // 总数量
        untreatedNumber: 0, // 未分配数量
        flag: true, // 增长还是下降
        percent: 0, // 百分比
      },
    }
  },
  methods: {
    debounce(fn) {
      let time = null;
      return (param) => {
        if (time) {
          clearTimeout(time);
        }
        time = setTimeout(() => {
          fn(param);
          clearTimeout(time);
        }, 1000);
      };
    },

    // 查询所有的工程师列表
    async allengineer(page=1,size=50){
      const param = {
        pageNum: page,
        pageSize: size,
        type: 'ENGINEER'
      }
      try {
        const res = await OrderAction.getAllEngineer(param);
      if (res) {
        this.engineerList = res.dataList;
        this.formTwo.engineerId = this.engineerList[0].id;
        console.log('所有工程师列表', this.engineerList);
      }
      }catch (e) {
        Message.error(e.message)

      }
    
    },

    // 获取统计数据
    async getCount(){
      try {
        const res = await OrderAction.getOrderCount();
      if (res) {
        this.formData = res;
      } 
      } catch (error) {
        
        Message.error(error.message);
      }
      
    },
    // 获取柱形图数据
    async getBarChart(type) {
      try{
        let myChart = this.$echarts.init(document.getElementById("barChart"));
      if (type === 'null') {
        this.form.ftype = type;
      } else {
        this.form.dateRange = [];
      }
      let param = {
        timeType: this.form.ftype,
        state: this.form.state,
      };
      let userName = [];
      let number = [];
      if (this.form?.dateRange?.length) {
        param.startTime = this.form?.dateRange[0];
        param.endTime = this.form?.dateRange[1];
      }
      let res = await OrderAction.getOrderNo(param);
      if (res) {
        // console.log('获取柱状图', res)
        res.forEach(item =>{
          userName.push(item.name);
          number.push(item.count);
        })
      }
      let barOptions = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // legend: {},
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: userName
        },
        series: [
          {
            type: 'bar',
            data: number,
            label: {
              show: true,
              position: 'right',
            }
          },
        ]
      };
      myChart.setOption(barOptions);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      }catch(e)
      {
        Message.error(e.message) 
      }
      
    },
    // 折线图
    async getLineChart() {
      try{
        let myChart = this.$echarts.init(document.getElementById("lineChart"));
      let param = {
        userId: this.formTwo.engineerId,
        timeType: this.formTwo.ftype,
      };
      let num = [];
      let ouoDate = [];
      let res = await OrderAction.getNumberByUser(param);
      if (res) {
        // console.log('获取折线图', res)
        res.forEach(item =>{
          num.push(item.num);
          ouoDate.push(item.ouoDate);
        })
      }
      let lineOptions = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ouoDate
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: num,
            type: 'line'
          }
        ]
      };
      myChart.setOption(lineOptions);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      }catch(e)
      {
        Message.error(e.message) 
      }
      
    },
  },
  async created() {
    await this.getCount();
    await this.allengineer();
    await this.getBarChart();
    await this.getLineChart();
  },
}
</script>

<style lang="scss" scoped>
  .classifybox {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 40px;

    .today {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 20%;
      padding: 18px;
      margin-right: 20px;
      border: 1px solid #ddd;
      border-radius: 5px;

      .img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }

      .right {
        flex: 1;
        margin-left: 25px;

        .title {
          font-size: 16px;
          color: #989898;
        }

        .number {
          padding: 5px 0;
          font-size: 25px;
          font-weight: 500;
        }

        .type {
          font-size: 6px;
          color: red;
        }

        .type-blue {
          font-size: 6px;
          color: #1bb9f8;
        }

        .compare {
          font-size: 6px;
          color: #989898;
        }
      }
    }
  }

  .echarts {
    width: 100%;
  }
</style>
